<template>
  <div class="form">
    <!-- 提示框 -->
    <el-dialog title="提示" :visible.sync="openOff1" center :append-to-body='true' :lock-scroll="false" width="30%">
    <h1>当前账号已在线，不可以重复登录！！！</h1>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="openOff2" center :append-to-body='true' :lock-scroll="false" width="30%">
    <h1>登录成功，去抢购吧！！！</h1>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="openOff3" center :append-to-body='true' :lock-scroll="false" width="30%">
    <h1>登录失败，清重新登录！！！</h1>
    </el-dialog>
     <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm" style="width: 400px;">
       <el-form-item label="账号" prop="account">
         <el-input v-model="loginForm.account" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="pass">
         <el-input type="password" v-model="loginForm.pass" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
         <el-button @click="resetForm('loginForm')">重置</el-button>
       </el-form-item>
     </el-form>
   </div>
</template>

<script>
    import {setCookie, getCookie} from '../../static/js/cookie.js';
    export default {
      name: "Login",
      data() {
        return {
          openOff1: false,
          openOff2: false,
          openOff3: false,
          loginForm: {
            account: '',
            pass: '',
          },
          rules: {

          }
        };
      },
      methods: {
        submitForm(formName) {
           var user_account = this.loginForm.account;
           var user_pass = this.loginForm.pass;
           // var user_info = {"name": user_account, "pass":user_pass};
           // 已经登录了就检测下重复登录
           if(sessionStorage.getItem('user_name') == user_account && sessionStorage.getItem('user_id') == getCookie('user_id')) {
               this.openOff1 = true;
           } else {
             // 可以发起 post 请求 发送登录参数
             this.$axios.post('/user/login', {
                   username: user_account,
                   password: user_pass
                  })
                  .then((res)=>{
                   if(res.status == 200) {
                      var response = res.data;
                      console.log(response);
                      var isSuccess = response.code;
                      if(isSuccess == 3) {  // 登录成功
                        const info = { name: user_account, pass: user_pass }
                        // 使用 cookie 来存储用户登录的状态
                        // todo 后面还可以添加用户的状态，参考: https://segmentfault.com/a/1190000018856394
                        setCookie('user_id', response.data);
                        console.log('cookie user_id is: ' + getCookie('user_id'));
                        sessionStorage.setItem('user_name', user_account);
                        sessionStorage.setItem('user_id', getCookie('user_id'));
                        console.log('session user name is: ' + sessionStorage.getItem('user_name'));
                        console.log('session user id is: ' + sessionStorage.getItem('user_id'));
                        this.openOff2 = true;
                        // 延迟10s返回首页
                        //setTimeout(this.$router.push({name: 'BookList', params: {}}), 10000);
                        //调用elementUI的加载层
                        const loading = this.$loading({
                               lock: true,
                               text: '10s后跳转到商品页面~',
                               spinner: 'el-icon-loading',
                               background: 'rgba(0, 0, 0, 0.7)'
                        });
                         setTimeout(() => {
                              this.$router.push({path: "/BookList"}); // 强制切换到商品页面
                              loading.close();
                         }, 5000);  // 5秒跳转
                      } else if(isSuccess == 4){  // 登录失败
                        this.openOff3 = true;
                      } else {  // 登录失败
                        this.openOff3 = true;
                      }
                   } else {

                   }
             });
           }
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    }

</script>

<style>
  .form {
    padding-left: 35%;
  }
</style>
